<template>
  <div class="w">
    <Grumb :info="nav"></Grumb>
    <div class="content">
      <ProductImg :info="productInfo"></ProductImg>
      <ProductMeg
        :info="productInfo"
        :parameterJson="parameterJson"
      ></ProductMeg>
      <Aside :info="themList"></Aside>
    </div>
    <div class="notice">
      <span @click="toggle(1)" :class="{ current: num == 1 }">商品详情</span>
      <span @click="toggle(2)" :class="{ current: num == 2 }">常见问题</span>
      <keep-alive>
        <component :is="componentId" :info="descriptionUrl"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import ProductDetail from "./ProductDetail";
import ProductImg from "./ProductImg";
import ProductMeg from "./ProductMeg";
import Aside from "./Aside";
import { Details } from "../../utils/api";
import Question from "./Question.vue";
import Grumb from "@/components/Grumb.vue";
export default {
  components: {
    ProductDetail,
    ProductImg,
    ProductMeg,
    Aside,
    Question,
    Grumb,
  },
  name: "Details",
  data() {
    return {
      productInfo: {},
      themList: [],
      nav: [
        { name: "首页", link: "###" },
        { name: "全部商品", link: "###" },
        { name: "商品详情", link: "###" },
      ],
      // 动态路由
      num: 1,
      componentId: "ProductDetail",
      // 商品描述
      descriptionUrl: [],
      // 版本信息
      parameterJson: [],
    };
  },
  methods: {
    toggle(id) {
      this.num = id;
      switch (id) {
        case 1:
          this.componentId = "ProductDetail";
          break;
        default:
          this.componentId = "Question";
          break;
      }
    },
  },
  async created() {
    document.documentElement.scrollTop = 0;
  },
  watch: {
    "$route.params.id": {
      immediate: true,
      async handler() {
        const details = await Details(this.$route.params.id);
        this.productInfo = details.data.productInfo;
        this.themList = details.data.themYouCanBuy;
        // this.nav = details.data.nav;
        this.parameterJson = details.data.productInfo.parameterJson;

        const description = details.data.productInfo.description;
        const imgReg = /<img.*?(?:>|\/>)/gi;
        const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        const imgArr = description.match(imgReg);
        // console.log(imgArr);
        this.descriptionUrl = imgArr.map((item) => {
          const src = item.match(srcReg);
          // console.log(src);
          if (src[1]) {
            let t = this.imgBaseUrl + "/" + src[1];
            return t;
            // console.log(t);
          }
        });
      },
    },
  },
};
</script>

<style lang='less' scoped>
.content {
  display: flex;
  padding-bottom: 53px;
  border-bottom: 1px solid #ececec;
}
.notice > span {
  display: inline-block;
  width: 120px;
  height: 50px;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.current {
  background-color: #0a328e;
  color: #fff;
}
</style>